<template>
  <div class="foot">
    <div class="foot-con flex flex-center">
      <div class="foot-content flex column flex-center">
        <div class="foot-tel flex flex-center">
          <img
            src="@/assets/img/icon-tel.png"
            width="43"
            height="43"
            alt="icon-tel"
          />
          <div>
            <p>400-096-0828</p>
            <p>7*24小时客服为您服务</p>
          </div>
        </div>
        <div class="foot-qr flex column flex-center">
          <img
            src="@/assets/img/cq-qr.png"
            width="159"
            height="159"
            alt="cq-qr"
          />
          <p>微信扫描二维码，关注【橙券】</p>
        </div>
      </div>
      <div class="foot-nav flex">
        <div>
          <p>橙品牌</p>
          <ul>
            <li v-for="item in aList" :key="item.name">
              <a href="#">{{ item.name }}</a>
            </li>
          </ul>
        </div>
        <div>
          <p>快速入口</p>
          <ul>
            <li v-for="item in qList" :key="item.name">
              <a href="#">{{ item.name }}</a>
            </li>
          </ul>
        </div>
        <div>
          <p>橙品牌</p>
          <ul>
            <li v-for="item in bList" :key="item.name">
              <a href="#">{{ item.name }}</a>
            </li>
          </ul>
        </div>
        <div>
          <p>橙品牌</p>
          <ul>
            <li v-for="item in cList" :key="item.name">
              <a href="#">{{ item.name }}</a>
            </li>
          </ul>
        </div>
      </div>
      <p class="foot-msg">©20xx xxxxxx有限公司 鲁ICP备130xxxx号-2xx</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      aList: [
        { name: "橙营销" },
        { name: "橙营销" },
        { name: "橙营销" },
        { name: "橙营销" },
      ],
      bList: [{ name: "橙营销" }, { name: "橙营销" }, { name: "橙营销" }],
      cList: [
        { name: "橙营销" },
        { name: "橙营销" },
        { name: "橙营销" },
        { name: "橙营销" },
        { name: "橙营销" },
        { name: "橙营销" },
      ],
      qList: [
        { name: "权益平台" },
        { name: "开放平台" },
        { name: "供应商入驻" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.foot {
  padding-top: 60px;
  width: 100%;
  height: 380px;
  background-color: #22212f;
}

a {
  text-decoration: none;
  color: #c8c8c8;
}

.foot-con {
  position: relative;
  margin: 0 auto;
  width: 1353px;
}

.foot-content {
  margin-bottom: 20px;
  padding-right: 85px;
  border-right: 1px solid #4c4f5f;
  width: 220px;
}

.foot-tel {
  margin-bottom: 20px;
}

.foot-tel img {
  margin-right: 10px;
}

.foot-tel p:nth-of-type(1) {
  font-size: 22px;
  color: #fff;
}

.foot-tel p:nth-of-type(2) {
  font-size: 14px;
  color: #fff;
}

.foot-qr img {
  margin-bottom: 15px;
}

.foot-qr p {
  font-size: 12px;
  color: #cecece;
}

.foot-nav {
  padding-left: 90px;
  align-items: flex-start;
}

.foot-nav div {
  margin-right: 160px;
}

.foot-nav div:last-of-type {
  margin-right: 0;
}

.foot-nav p {
  margin-bottom: 41px;
  font-size: 16px;
  color: #fff;
}

.foot-nav li {
  margin-bottom: 15px;
  margin-left: -30px;
  font-size: 14px;
  color: #cecece;
}

.foot-con::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 1400px;
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.1),
    #4c4f5f 60%,
    rgba(0, 0, 0, 0.1)
  );
}

.foot-msg {
  position: absolute;
  bottom: -30px;
  font-size: 14px;
  color: #7e8088;
}
</style>
